<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :keyboard="false"
    :forceRender="true"
    @cancel="handleCancel"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-x: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        取消
      </a-button>
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
    <a-form :form="form">
      <a-form-item  label="渠道来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
         {{model.source}}
      </a-form-item>
      <a-form-item  label="客户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
         {{model.name}}
      </a-form-item>
      <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          {{model.tel}}
      </a-form-item>
      <a-form-item label="地址" :labelCol="{xs:24,sm:5}" :wrapperCol="wrapperCol" >
         {{model.address}}
      </a-form-item>
      <a-form-item label="收益总和" :labelCol="labelCol" :wrapperCol="wrapperCol" >
        {{model.profit}}
      </a-form-item>
      <a-form-item label="信用等级" :labelCol="labelCol" :wrapperCol="wrapperCol" >
        {{model.credit}}
      </a-form-item>
      <a-form-item label="身份证号" :labelCol="{xs:24,sm:6}" :wrapperCol="wrapperCol" >
        {{model.idNumber}}
     </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份信息">
          <j-image-upload v-model="model.fileName" :disabled="true" bizPath="business" text="上传" isMultiple></j-image-upload>
      </a-form-item>
      <!-- 详情 -->
      <div style="margin-bottom: 20px;">紧急联系人信息：</div>
      <a-table :columns="materialTable.columns"  :data-source="materialTable.dataSource" bordered>
          <template #name="{ text }">
            <a>{{ text }}</a>
          </template>
        </a-table>
    </a-form>
  </a-spin>
  </j-modal>
</template>
<script>
import pick from 'lodash.pick'
import Vue from 'vue'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import JUpload from '@/components/jeecg/JUpload'
import { getCustomOne } from '@/api/api'
import JImageUpload from '@/components/jeecg/JImageUpload'
export default {
  name: 'CustomListDetail',
  components: {
    JImageUpload,
    JUpload
  },
  data () {
    return {
      materialTable:{
          dataSource:[],
          columns:[{
            title:'姓名',
            dataIndex:'name'
          }
          ,{
            title:'电话号码',
            dataIndex:'tel'
          },{
            title:'职业',
            dataIndex:'career'
          },{
            title:'关系',
            dataIndex:'relationship'
          },{
            title:'住址',
            dataIndex:'address'
          },{
            title:'身份证号码',
            dataIndex:'idNumber'
          }]
        },
      titleColor:'',
      title:"详情",
      visible: false,
      isReadOnly: false,
      modalWidth:600,
      drawerWidth:600,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      uploadLoading:false,
      confirmLoading: false,
      headers:{},
    }
  },
  created () {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token":token}
  },
  methods: {
    show(record) {
      this.visible = true
      let that = this
      this.$nextTick(() => {
        // this.model = Object.assign({}, record);
        let params = {
          id : record.id
        }
    // 通过获取单个数据的接口(/custom/selectOne)
        getCustomOne(params).then(res => {
          console.log(res.data,'getCustomOne');
          that.model = Object.assign({}, res.data);
          // <!-- 字段：客户姓名，联系电话，身份证号，地址，收益总和，信用等级 -->
          that.form.setFieldsValue(pick(that.model,'name','source','tel','idNumber','address','profit','credit','fileName','businessDays','overdueShortDays','overdueLongDays'))
          that.materialTable.dataSource.splice(0,that.materialTable.dataSource.length)
          that.materialTable.dataSource.push(...res.data.itemList)
          console.log(that.materialTable.dataSource);
        })
      });
    },

    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close');
      this.visible = false;
    }
  }
}
</script>

<style lang="less">
.ant-modal-body{
  overflow-x: hidden;
  overflow-y: auto;
}
</style>